<template>
  <div class="row">
    <div v-if="$store.state.ISJIA">欢迎</div>
    <div v-else-if="$store.state.ISSHOW">加载失败</div>
    <div v-else-if="$store.state.ISJIAZAI">加载中</div>
    <div v-else v-for="item in items" :key="item.id" class="card">
      <a href="item.html_url" target="_blank">
        <img
          :src="item.avatar_url"
          style="width: 100px"
        />
      </a>
      <p class="card-text">{{item.login}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "VueDemoIndex",
  mounted() {
    // this.$bus.$on("getData", this.getData);\
  },
  computed:{
    items(){
      return this.$store.state.ITEMLIST
    }
  },
  methods: {
    getData(val) {
     this.$store.dispatch("getData",val)
    },
  },
};
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>